<template>
    <div class="comments" v-if="comments.post_comment_id">
        <div class="comments_left">
           <img class="headimg" :src="comments.headimgurl || '/static/img/icon-mine-grey@3x.png'" alt="">
        </div>
        <div class="comments_right">
            <p class="user_name">{{comments.username || '神秘用户'}} <span v-if="comments.is_onwer == 1" class="icon_tie">帖主</span></p>
            <p class="comments_content" @click="reply(comments.post_comment_id,comments.username || '神秘用户')">{{comments.content}}</p>
            <div @click="$router.push(`/comments/p/${comments.post_comment_id}`)" class="comments_more" v-if="comments.second&&comments.second[0]">
               <p v-for="(item,index) in comments.second" v-if="Number(index) < 2" :key="index"><span class="user_name">{{item.reply_username || '神秘用户'}}：</span>{{item.content}}</p>
               <div class="user_name" v-if="comments.second.length>2" >共{{comments.second.length}}条回复></div>
            </div>
            <p class="hui font_12" style="line-height:.48rem;">{{comments.addtime | formatDate}}</p>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        comments:{
            type:Object,
            default:()=>{}
        },
        id:{
            type:String,
            default:''
        }
    },
    name: 'comments',
    data() {
        return {}
    },
    methods:{
        reply(id,user){
          this.$emit('reply',id,user)  
        }
    },
    created() {
        
    }
}
</script>

<style scoped>
.comments{
    display: flex;
}
.comments_left .headimg{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: .24rem
}
.comments_right{
    width: 100%
}
.comments_right .user_name{
    margin: .16rem 0 .1rem;
    color: #4D87C8
}
.comments_content{
    font-size: .32rem;
    font-weight: 600
}
.comments_right .user_name .icon_tie{
    display: inline-block;
    border: solid 0.5px #4D87C8;
    font-size: .24rem;
    padding: 0 .06rem;
    margin:0 .08rem
}
.comments_more{
    background:rgba(243,243,243,1);
    padding: .24rem .16rem;
    font-size: .24rem;
    width: 100%;
}
.comments_more p{
    line-height: .48rem
}
</style>
